<template>
	
	<view class="activateMembership">
		<view class="header">
			<view class="left">
				<image style="border-radius: 50%;" :src="info.avatar?info.avatar:'https://oss.6mate.cn/mini/minidefaultavatar.png'"
					mode=""></image>
				<view class="info">
					<view class="top">
						{{info.realName|| ''}}
						<text>{{info.miniUserTypeName || ''}}</text>
					</view>
					<view class="bot">
						服务到期日：{{info.expireTime|| ''}}
					</view>
				</view>
			</view>

			<view class="tags" @click="navTO">
				续费记录
			</view>
		</view>
		<view class="package">
			<view class="title">
				续费套餐
			</view>

			<view class="container">
				<scroll-view class="scroll-view" scroll-x="true" style="overflow:auto;-webkit-scrollbar-display: none;">

					<view class="item" @click="tab(index,item)" v-for="(item,index) in priceList"
						:class="[cur==index?'active':'']">
						<view class="tag">
							{{item.name}}
						</view>
						<view class="day">
							期限{{item.desc}}
						</view>
						<view class="money">
							<text class="now">
								￥
								<text>{{item.salePrice}}</text>
							</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="title" style="margin-bottom:24rpx ;">
				专享权益
			</view>
			<view class="tagBox">
				<view v-for="item in miniBenefitenabledAllList" class="item">
					<image :src="item.imageUrl" mode=""></image>
					<view class="intros">
						{{item.name}}
					</view>
				</view>
				<!-- <view class="item">
					<image src="
https://oss.6mate.cn/mini/user/9.png" mode=""></image>
					<view class="intros">
						线下红娘支持
					</view>
				</view>
				<view class="item">
					<image src="
https://oss.6mate.cn/mini/user/10.png" mode=""></image>
					<view class="intros">
						客户管理
					</view>
				</view>
				<view class="item">
					<image src="
https://oss.6mate.cn/mini/user/11.png" mode=""></image>
					<view class="intros">
						会员管理
					</view>
				</view>
				<view class="item">
					<image src="
https://oss.6mate.cn/mini/user/12.png" mode=""></image>
					<view class="intros">
						APP资源共享
					</view>
				</view>
				<view class="item">
					<image src="
https://oss.6mate.cn/mini/user/13.png" mode=""></image>
					<view class="intros">
						营销管理
					</view>
				</view> -->


			</view>

		</view>


		<view class="wx">
			<view class="title">
				本次应付金额
			</view>
			<view class="wxIcon" v-for="item in payList">
				<view class="left">
					<image :src="item.imageUrl" mode=""></image>
					{{item.displayName}}

				</view>
				<view class="nums">
					<text>￥</text>
					<!-- 598 -->
					{{curMoney}}
				</view>
			</view>
		</view>
		<view class="botBox">
			<view class="item1">
				<u-button shape="circle" type="error" @click="submit" :ripple="true" ripple-bg-color="#d7d8da">确认协议并立即续费
				</u-button>
			</view>
			<view class="read">
				<u-checkbox label-size="23" size="28" shape="circle" v-model="checked" active-color="red">开通即同意
				</u-checkbox>
				《软件服务协议》
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				payList: [],
				appPayPropId: '',
				curMoney: '',
				remark: '',
				checked: true,
				cardTypeId: '',
				cur: 0,
				fileList11: [],
				fileList1: [],
				miniBenefitenabledAllList: [],
				info: null,
				priceList: [],
				nickName: "张三",
				photo: '',
				attributes: '单独点',
				bgColor: '',
				cardTypeName: '',
				memberId: '',
				curInfo: null
			}
		},
		onShow() {
			this.FnloginUser()
			this.getenabledAll()
			this.getminiBenefitenabledAll()
			this.getpayPropFind() //获取支付方式
		},
		onLoad() {
			if (!this.vuex_openId) {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						this.$u.api.getWechatOpenId({
							code: oginRes.code,
						})
						.then(res => {
							this.$u.vuex("vuex_openId", res?.data?.openId);
						});
					}
				});

			}
		},


		methods: {
			getpayPropFind() {
				this.$u.api.payPropFind({
						payScene: 'SOFT_SERVICE',
					})
					.then(res => {
						this.payList = res?.data
						console.log(res, 666666);
						this.appPayPropId = res?.data?. [0]?.appPayPropId

					});
			},

			navTO() {
				uni.navigateTo({
					url: "/pages/sys/user/record"
				})
			},


			getminiBenefitenabledAll() {

				this.$u.api.miniBenefitenabledAll()
					.then(res => {
						this.miniBenefitenabledAllList = res.data
						console.log(res.data, 77889);
					});
			},
			getenabledAll() {

				this.$u.api.enabledAll()
					.then(res => {
						this.priceList = res.data
						this.curMoney = res.data?. [0]?.salePrice
						this.cardTypeId = res.data?. [0]?.id
					});
			},
			FnloginUser() {

				this.$u.api.loginUser()
					.then(res => {
						this.info = res.data

					});
			},

			fnnotifyPaySuccess(orderId) {
				this.$u.api.notifyPaySuccess({
						orderId
					})
					.then(res => {
						uni.navigateTo({
							url: "/pages/sys/user/record"
						})
					});

			},
			FngetPayStartParams(val) {

				let that = this;

				this.$u.api.getPayStartParams({
						orderId: val.id,
						appPayPropId: this.appPayPropId
					})
					.then(res => {

						this.$u.toast(res.msg);
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: new Date().getTime(),
							...JSON.parse(res?.data?.jspay),
							success: function(res1) {
								uni.showModal({
									title: "提示",
									confirmColor: "#FA4A53",
									showCancel: false,
									content: "支付成功!",
									confirmText: "确定",
									success: function(res1) {
										console.log(res?.data?.orderId, '6666666');
										that.fnnotifyPaySuccess(res?.data?.orderId)
							 	},
									fail: function(err) {
										console.log("fail:" + JSON.stringify(err));
									},
								});
								// orderId

							},
							fail: function(err) {
								console.log("fail:" + JSON.stringify(err));
							},
						});
					});
			},


			submit() {
				this.checked = true
				this.$u.api.softOrderAdd({
						cardTypeId: this.cardTypeId
					})
					.then(res => {

						this.FngetPayStartParams(res.data)
						console.log(res.data, 88888888)
					});



				// let query = {
				// 	memberId: this.memberId,
				// 	cardTypeId: this.cardTypeId,
				// 	fileList: this.fileList11,
				// 	description: this.remark
				// }
				// this.$u.api.vipOpenRecordAdd(query)
				// 	.then(res => {
				// 		console.log(res, 43567);
				// 		if (res.code == 'ok') {
				// 			uni.redirectTo({
				// 				url: "/subPack/openingRecord/index"
				// 			})
				// 		} else {
				// 			uni.showToast({
				// 				icon: 'none',
				// 				title: res.msg,
				// 				duration: 5000
				// 			})
				// 		}
				// 	});
			},
			tab(index, item) {

				this.cur = index
				this.curMoney = item?.salePrice
				this.cardTypeId = item?.id
			},
			getCurPrice(cardTypeId) {
				this.$u.api.vipOpenRecordSelect({
						cardTypeId,
						memberId: this.memberId
					})
					.then(res => {
						console.log(res.data, 43567);
						this.curInfo = res?.data
					});
			},

			successUpload1(data, index, lists) {
				let url = data.data;
				this.fileList11.push(url);
			},
			onRemove1(index) {
				this.fileList11.splice(index, 1);
			},
		}
	}
</script>

<style scoped lang="scss">
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.wx {
		border-top: 2rpx solid #f5f5f5;
		padding-top: 24rpx;

		.wxIcon {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #0F1417;
				line-height: 40rpx;
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}

			.nums {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 56rpx;
				color: #FA4A53;
				// line-height: 33rpx;
				text-align: right;

				text {
					font-size: 28rpx;
				}
			}
		}
	}

	.read {
		text-align: center;
		padding: 26rpx 0 0;
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #FA4A53;
		line-height: 23rpx;

		/deep/ .u-checkbox__label {
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 400 !important;
			font-size: 24rpx !important;
			color: rgba(15, 20, 23, 0.7) !important;
			line-height: 23rpx;
			margin-right: 0;
		}
	}

	.tagBox {
		display: flex;
		flex-wrap: wrap;

		.item {
			border-radius: 10rpx;
			padding: 20rpx 8rpx;
			border: 1rpx solid rgba(255, 242, 243, 1);
			// box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
			
			// box-shadow: 0 3rpx 6rpx rgba(255, 225, 225, 0.16);
			width: 31%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			&:nth-child(3n-1){
				margin: 0 3.5% 20rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin: 0 auto;
				display: block;
				margin-bottom: 20rpx;
			}

			.intros {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #0F1417;
				line-height: 33rpx;
				text-align: center;
			}
		}
	}

	.container {
		width: 100%;
		white-space: nowrap;
	}

	/* 针对安卓设备隐藏滚动条 */
	.scroll-view ::-webkit-scrollbar {
		display: none;
		/* 针对Webview */
	}

	.scroll-view {
		-ms-overflow-style: none;
		/* 针对IE、Edge */
		scrollbar-width: none;
		/* 针对Firefox */
	}

	.scroll-view {
		display: inline-block;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;


		.item {
			display: inline-block;
			width: 180rpx;
			height: 220rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid #E6E6E6;
			margin-right: 24rpx;
			position: relative;
			overflow: hidden;
			margin-bottom: 10rpx;

			.tag {
				background: #FFF0F1;
				position: absolute;
				left: 0;
				top: 0;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 24rpx;
				color: #FA4A53;
				height: 36rpx;
				display: flex;
				padding: 0 16rpx;
				align-items: center;
				justify-content: center;
				border-radius: 0 0 12rpx 0;
			}

			.day {

				padding-top: 60rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 28rpx;
				color: #0F1417;
				line-height: 33rpx;
				text-align: center;
			}

			.money {
				padding: 8rpx 0;

				display: flex;
				align-items: center;
				justify-content: center;

				.now {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 28rpx;
					color: #FA4A53;
					// line-height: 33rpx;
					text-align: justified;

					text {
						font-size: 56.25rpx;
					}

				}
			}

			.service {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 24rpx;
				color: #FA4A53;
				line-height: 28rpx;
				height: 44rpx;
				background: #FFF0F1;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			&:last-child {
				margin-right: 0;
			}

			&.active {
				background: #FFF0F1 !important;
				border: 2rpx solid #FA4A53 !important;

				.service {
					background: #FA4A53 !important;
					color: #FFFFFF;
				}

				.tag {
					background: #FA4A53 !important;
					color: #FFFFFF;
				}
			}
		}

	}

	.scroll-item {
		display: inline-block;
		width: 100px;
		margin-right: 10px;
		text-align: center;
	}

	.activateMembership {
		padding: 0 40rpx;

		.tips {
			display: flex;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 12rpx;
			}

			.infos {
				flex: 1;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(15, 20, 23, 0.6);
				line-height: 36rpx;
				margin-top: -5rpx;
			}
		}

		.old {
			.title1 {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 40rpx;
				color: #FA4A53;
				line-height: 47rpx;
				padding: 0 0 24rpx;
			}

			.listbox {

				// border-bottom: 2rpx solid #F6F6F6;
				.items1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.left {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 33rpx;
					}

					.right {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 32rpx;
						color: #0F1417;
						line-height: 38rpx;

						&.pay {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 700 !important;
							font-size: 30rpx;
							color: #FA4A53 !important;
							line-height: 33rpx;
						}
					}
				}
			}
		}

		.botBox {
			padding: 108rpx 0 60rpx 0;
			// z-index: 998;
			// position: fixed;
			// left: 40rpx;
			// bottom: 90rpx;
			// padding-bottom: env(safe-area-inset-bottom);
			// right: 40rpx;

			.item1 {
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
			}
		}

		.intro {

			padding: 6rpx 16rpx 0;

			background: #F1F1F1;
			border-radius: 10rpx 10rpx 10rpx 10rpx;

			&.intro1 {
				height: 176rpx;
				// margin-top: 24rpx;
			}

			/deep/ .u-input__input {
				text-align: left !important;
				// margin-right: 24rpx;
			}

			/deep/ textarea,
			uni-textarea {
				height: 60px;
			}

			.max {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(15, 20, 23, 0.4);
				line-height: 28rpx;
				text-align: right;
			}
		}

		.photos {
			background: #FFFFFF;
			padding: 0;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			// margin-bottom: 24rpx;

			.open {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #0F1417;
				line-height: 33rpx;
			}

			.tit {
				margin-bottom: 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					>text:nth-child(1) {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 40rpx;
					}

					>text:nth-child(2) {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(15, 20, 23, 0.4);
						line-height: 28rpx;
					}
				}

				.right {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(15, 20, 23, 0.4);
					line-height: 28rpx;
				}
			}
		}

		.title {
			padding: 24rpx 0 24rpx;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: bold;
			font-size: 32rpx;
			color: #0F1417;
			line-height: 38rpx;
		}

		.package {}

		.header {
			padding-top: 60rpx;
			padding-bottom: 24rpx;
			// border-bottom: 2rpx solid #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-right: 24rpx;
				}

				.info {
					flex: 1;

					.top {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 36rpx;
						color: #0F1417;
						line-height: 42rpx;

						text {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #FA4A53;
							line-height: 33rpx;
							padding-left: 16rpx;
						}
					}

					.bot {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(15, 20, 23, 0.4);
						line-height: 28rpx;
						margin-top: 10rpx;
					}
				}
			}

			.tags {
				width: 160rpx;
				height: 56rpx;
				background: #FA4A53;
				border-radius: 78rpx 78rpx 78rpx 78rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;


			}
		}
	}
</style>
